<template>
    <span
        v-if="tag && text"
        :style="{
            color: color || tag.color || 'var(--f-c-root)'
        }"
        class="no-wrap-text"
        style="font-size: 0.57rem"
    >
        {{ tag.desc || tag }}
    </span>
    <span
        v-else-if="tag"
        :style="{
            backgroundColor: backgroundColor,
            borderColor: tag.color || 'var(--f-c-root)'
        }"
        class="el-tag el-tag--light"
    >
        <span class="no-wrap-text" :style="{ color: tag.color }">{{ tag.desc || tag }}</span>
    </span>
    <span v-else>-</span>
</template>

<script>
export default {
    props: {
        tag: {
            // eslint-disable-next-line vue/require-prop-type-constructor
            type: Object | String,
            required: true
        },
        text: {
            type: Boolean,
            required: false,
            default: false
        },
        color: {
            type: String,
            required: false,
            default: ""
        }
    },
    computed: {
        backgroundColor() {
            return (this.tag.color || "var(--f-c-root)") + "0a";
        }
    }
};
</script>
<style lang="scss">
.el-tag {
    border-radius: 0.15rem;
}
</style>
